<template>
    <div focusable="false" @layout="handleLayoutChange" class="container-home">
        <!-- 返回首页提示 -->
        <image-view
            class="page-back-tips"
            v-if="isShowCenterStatus"
            src="assets/raw/image/page-back-tips.png"
        ></image-view>
        <!-- webview加载,地图等 -->
        <div
            class="webview-wrap"
            v-if="isShowWebView"
            nextFocusName="{up:'self', left: 'self', right: 'self'}"
        >
            <WebView
                class="iframe"
                ref="iframeWeb"
                focusable="true"
                @load="onLoad"
                @loadStart="onLoadStart"
            />
        </div>
        <!-- 打开全屏图片或二维码 -->
        <div
            class="allseen-box"
            :focusable="route.name === 'home' ? true : false"
            ref="allseenRef"
            nextFocusName="{msgId:'allseenFocus',left:'self',right:'self',down:'self',up:'self' }"
            v-if="isShoeImageScreen"
            @focus="() => allseenFocusAction()"
            @click="() => allseenFocusClick()"
        >
            <image-view
                class="allseen-img"
                :src="jumpDataInfo && jumpDataInfo.actionUrl"
            />
            <qr-view
                class="helper-qrcode"
                :content="aiHelperUrl"
                v-if="jumpDataInfo.actionUrl === scanImageUrl"
            ></qr-view>
        </div>
        <!-- 左侧小加提醒头像 -->
        <image-view
            v-if="getTopicEnd"
            class="xiaojia-img"
            src="assets/raw/image/left-title-tips.webp"
        />
        <!-- 左右两侧顶部和底部阴影 -->
        <div
            class="left-box-top-shadow"
            v-if="getTopicEnd && leftFcousIndex !== 0"
        ></div>
        <div class="left-box-bottom-shadow" v-if="getTopicEnd"></div>
        <div
            class="right-box-top-shadow"
            v-if="getTopicEnd && rightFocusIndex !== 0"
        ></div>
        <div class="right-box-bottom-shadow" v-if="getTopicEnd"></div>
        <!-- 左侧推荐位列表 -->
        <ul
            v-if="getTopicEnd"
            class="left-box"
            ref="leftListRef"
            clipPadding="{ bottom: 30 }"
            clipChildren="false"
            clipToPadding="false"
            endHintEnabled="false"
            nextFocusName="{msgId:'leftListFocus',left:'self',right:'self',down:'self',up:'self' }"
            @scroll="onLeftBoxScroll"
        >
            <li
                v-for="(item, index) in leftSelectList"
                :key="index"
                focusable="false"
                class="left-item"
                clipChildren="false"
                clipToPadding="false"
            >
                <div
                    class="left-nav"
                    :focusable="
                        route.name === 'home' || isShowCenterStatus
                            ? true
                            : false
                    "
                    focusScale="1.07"
                    keyDelayTime="500"
                    @click="leftFocusClickFun(index, item)"
                    @focus="leftFocusSelectFun(index)"
                >
                    <div
                        class="title-box"
                        :gradientBackground="queryGradientBackground(index)"
                    >
                        <p class="leftTitle">{{ item.title }}</p>
                    </div>
                    <p
                        class="leftDesc"
                        v-if="typeof item.introduction == 'string'"
                    >
                        {{ item.introduction }}
                    </p>
                    <div class="leftDesc" v-else>
                        <p
                            class="leftItemDesc"
                            v-for="(itemDesc, iDesc) in item.introduction"
                            :key="iDesc"
                        >
                            {{ itemDesc }}
                        </p>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 右侧推荐位列表 -->
        <ul
            v-if="getTopicEnd"
            class="right-box"
            ref="rightListRef"
            clipPadding="{ bottom: 30 }"
            clipChildren="false"
            clipToPadding="false"
            endHintEnabled="false"
            nextFocusName="{msgId:'rightListFocus',left:'self',right:'self',down:'self',up:'self' }"
        >
            <li
                v-for="(item, index) in rightSelectList"
                :key="index"
                focusable="false"
                class="right-item"
                clipChildren="false"
                clipToPadding="false"
            >
                <div
                    class="right-nav"
                    :focusable="
                        route.name === 'home' || isShowCenterStatus
                            ? true
                            : false
                    "
                    keyDelayTime="500"
                    focusScale="1.07"
                    @click="rightFocusClickFun(index, item)"
                    @focus="rightFocusSelectFun(index)"
                >
                    <image-view
                        duplicateParentState
                        class="right-image"
                        :src="item.contentImage"
                        :style="{ height: item.contentHeight }"
                    ></image-view>
                    <text-view
                        v-if="index === 0"
                        gravity="centerVertical"
                        class="my-score-title"
                        >我的积分</text-view
                    >
                    <p v-if="index === 0" class="my-score-tips">共获得</p>
                    <text-view
                        v-if="index === 0"
                        gravity="centerVertical"
                        class="my-score"
                        >{{ score }}</text-view
                    >
                    <div v-if="index === 2" class="stock-info-box">
                        <div class="stock-info-top">
                            <div class="info-left">
                                <p class="stock-text">
                                    {{ firstStock.currentPrice }}
                                </p>
                                <p class="stock-text">{{ firstStock.name }}</p>
                            </div>
                            <div class="info-right">
                                <p
                                    class="info-right-num"
                                    :style="{ color: firstStock.color }"
                                >
                                    {{ firstStock.priceChangePercent }}
                                </p>
                                <image-view
                                    class="info-right-icon"
                                    :src="firstStock.changeImg"
                                ></image-view>
                            </div>
                        </div>
                        <div class="stock-info-bottom">
                            <div class="info-left">
                                <p class="stock-text">
                                    {{ secondStock.currentPrice }}
                                </p>
                                <p class="stock-text">{{ secondStock.name }}</p>
                            </div>
                            <div class="info-right">
                                <p
                                    class="info-right-num"
                                    :style="{ color: secondStock.color }"
                                >
                                    {{ secondStock.priceChangePercent }}
                                </p>
                                <image-view
                                    class="info-right-icon"
                                    :src="secondStock.changeImg"
                                ></image-view>
                            </div>
                        </div>
                    </div>
                    <div v-if="index === 3" class="map-address-box">
                        <image-view
                            duplicateParentState
                            class="map-shadow-bg"
                            src="assets/raw/image/map-widget-shadow-bg.png"
                            :style="{ height: item.contentHeight }"
                        ></image-view>
                        <div class="map-address-time" v-if="!hasNoLocation">
                            <p>去公司</p>
                            <p class="need-time">{{ toTime }}</p>
                            <p>分</p>
                        </div>
                        <div class="no-location-tip" v-if="hasNoLocation">
                            <p class="no-location-tip-title">出行服务</p>
                            <p class="no-location-tip-detail">
                                设置家庭地址及公司地址即可获取实时导航信息
                            </p>
                        </div>
                        <text-view
                            ellipsizeMode="3"
                            duplicateParentState
                            lines="1"
                            class="map-address-text"
                            v-if="!hasNoLocation"
                            >{{ showPlaceName }}</text-view
                        >
                    </div>
                </div>
            </li>
        </ul>
        <!-- 动画标签 -->
        <div class="lottieview-nav">
            <lottie-view
                v-show="isShowLottieviewQipao"
                ref="lottieviewQipao"
                class="lottieview-qipao-box"
                jsonSrc="assets/raw/ani/raise_like/qipao.json"
            />
            <lottie-view
                v-show="isShowLottieview5"
                ref="lottieviewF"
                class="lottieview-box"
                jsonSrc="assets/raw/ani/raise_like/+5.json"
            />
            <lottie-view
                v-show="isShowLottieview10"
                ref="lottieviewT"
                class="lottieview-box"
                jsonSrc="assets/raw/ani/raise_like/+10.json"
            />
            <lottie-view
                v-show="isShowLottieviewNoteRefresh"
                ref="lottieviewNoteRefresh"
                class="lottieview-noteRefresh-box"
                jsonSrc="assets/raw/ani/raise_like/noteRefresh.json"
            />
        </div>
        <!-- 中间内容 -->
        <div v-show="isShowCenterStatus ? false : true" class="content-box">
            <div class="center-top-shadow"></div>
            <!-- 顶部按钮切换 -->
            <HeaderBanner
                ref="HeaderBannerWrap"
                @selectCreatAction="selectCreatAction"
                @focusHistoryChange="focusHistoryChange"
                :route="route"
                class="header-banner-box"
            />
            <!-- 竖向单行推荐位,目前已开发暂未应用, isShowBigTopic打开后应用到第一个banner-->
            <RecommendList
                v-if="isFirstLoadEnd"
                v-show="bannerFocusIndex === 0 && isShowBigTopic"
                ref="RecommendListWrap"
                :route="route"
                :phtvChineseInfo="phtvChineseInfo"
                @focusHistoryChange="focusHistoryChange"
            />
            <!-- 中间推荐位 -->
            <CenterSelectList
                v-if="isFirstLoadEnd"
                v-show="bannerFocusIndex !== 0 || !isShowBigTopic"
                ref="selectBoxWrap"
                :route="route"
                :oneImageSrc="oneImageSrc"
                @topicsJump="topicsJump"
                @focusHistoryChange="focusHistoryChange"
                @oneImgFocusAction="oneImgFocusAction"
                @oneImgFocusClick="oneImgFocusClick"
                :showWeather="oneDataInfo && oneDataInfo.voiceInfo === '天气'"
                :todayWeather="todayWeather"
                :otherDayWeather="otherDayWeather"
                :locationAreaName="locationAreaName"
            />
        </div>
    </div>
</template>
<script>
import atlas from "@/atlas";
import Store from "@/store";
import server from "@/server/index.js";
import * as utils from "@/utils";
import API from "@/server";
import Vue from "vue";
import dataUtils from "@/utils/dataUtils.js";
import HeaderBanner from "@/page/home/components/headerBanner.vue";
import RecommendList from "@/page/home/components/recommendList.vue";
import CenterSelectList from "@/page/home/components/centerSelectList.vue";
import { LyWidget } from "@/hippy-focus/index.js"
import moment from "moment";
export default {
    name: "index",
    props: [
        "route",
        "entryPage",
        "allConfig",
        "focusHistoryRef",
        "lastFocusHistoryRef",
        "animationDone",
    ],
    components: {
        HeaderBanner,
        RecommendList,
        CenterSelectList,
        LyWidget,
    },
    data() {
        return {
            // tab切换下标
            bannerFocusIndex: 0,
            // 加5积分动画
            isShowLottieview5: false,
            // 加10积分动画
            isShowLottieview10: false,
            // 气泡动画
            isShowLottieviewQipao: false,
            // 加5积分动画定时器
            lottieViewTimer: null,
            // 加10积分动画定时器
            lottieViewTimer2: null,
            // 气泡动画定时器
            lottieViewQipaoTimer: null,
            // 推荐位列表
            selectList: [],
            // 当前头部推荐位数据
            selectDataInfo: [],
            // 头部推荐位数据列表
            selectDataList: [],
            // 左侧信息栏列表
            leftSelectList: [],
            // 右侧信息栏列表
            rightSelectList: [],
            // 左侧当前上焦下标
            leftFcousIndex: 0,
            // 右侧当前上焦下标
            rightFocusIndex: 0,
            // 是否展示推荐位全屏图片
            isShoeImageScreen: false,
            // 推荐位跳转信息
            jumpDataInfo: null,
            // 是否离开头部推荐位
            isOneImageLeave: false,
            // 当天的天气
            todayWeather: {},
            // 其他日期天气
            otherDayWeather: [],
            // 积分
            score: 0,
            // 每次跳转加积分标识
            addScoreUnitFlag: 0,
            // 是否展示webview信息
            isShowWebView: false,
            // 天气地址信息
            locationAreaName: "",
            // 卡片第一行股票
            firstStock: {
                currentPrice: "",
                name: "",
                priceChangePercent: "",
                changeImg: "",
                color: "#ffffff",
            },
            // 卡片第二行股票
            secondStock: {
                currentPrice: "",
                name: "",
                priceChangePercent: "",
                changeImg: "",
                color: "#ffffff",
            },
            toTime: 0, // 花费时间
            hasNoLocation: true, // 还没有家和公司的地址信息
            description: "", // 道路情况
            // 路线终点位置
            showPlaceName: "",
            // 道路图标
            roadIcon: "",
            // 地图描述高度
            descriptionHeigt: "",
            // 左侧卡片信息
            todayRemindInfo: {},
            // 安保信息
            alarmInfoData: null,
            // 直播信息列表
            phtvChineseList: [],
            // 当前直播信息
            phtvChineseInfo: null,
            // 直播信息更新定时器
            updateProgramInterval: null,
            // 直播信息列表的当前时间
            programToDayTime: null,
            // 日程位置
            schedulePositionArr: [],
            // 日程信息
            scheduleNowInfo: null,
            // iframe打开链接
            webViewLink: "",
            // 直播uuid
            uuidValue: "",
            // 直播推荐位的位置
            uuidPositionArr: [],
            // 默认焦点是否打开
            defalutFocusStatus: false,
            // 焦点禁用清除
            defalutFocusTime: null,
            // 获取推荐位数据完成
            getTopicEnd: false,
            // 推荐位加载完成
            isFirstLoadEnd: false,
            // 头部推荐位图片
            oneImageSrc: "",
            // 当前头部推荐位信息
            oneDataInfo: {},
            animationTimer: null, // 轮播图动画定时器
            animationIntervalData: null, // 当前所有轮播图的数据
            isShowBigTopic: false, // 是否展示大推荐位
            // 左侧推荐位标题背景渐变色
            colorsList: [
                ["#ffE4702F", "#ffEB9B44"],
                ["#ffE33E39", "#ffE98D79"],
                ["#ffE5AF4F", "#ffF3E59B"],
                ["#ff5545BF", "#ff9387D6"],
            ],
            //左侧消息刷新定时器
            lifeNoteRefreshInterval: null,
            //实时消息列表
            lifeNoteList: [],
            //过滤后的有效消息数量
            leftNoteLen: 0,
            // 用户城市及经纬度信息
            userCommonInfo: {},
            // 地图gui跳转地址
            mapWebViewLink: "",
            // 今日消息通知刷新提醒动画
            isShowLottieviewNoteRefresh: false,
            // 今日消息通知刷新提醒动画定时器
            lottieViewNoteRefreshTimer: null,
            leftOffsetY: 0,
            // AI助手下载页地址
            aiHelperUrl: this.allConfig.AI_HELPER_URL,
            // AI助手扫码静态图片
            scanImageUrl: "assets/raw/image/location-scan.webp",
        };
    },
    created() {},
    mounted() {
        Vue.Native.callNative(
            "ConsoleModule",
            "log",
            `routerToPage=>index:mounted`
        );
        this.onEvent();
        this.getAllRequestInit();
    },
    computed: {
        // 是否禁用焦点,跳转页面或弹框时,需要禁用首页焦点,不然焦点还可以切到首页上
        isShowCenterStatus() {
            return [
                "searchProgram",
                "personInformation",
                "newMerchant",
                "newCoupon",
                "trainTicket",
                "weatherDetail",
                "mapDetail",
            ].includes(this.route.name);
        },
    },
    beforeDestroy() {
        console.log("beforeDestroy:page=>index");
        this.offEvent();
    },
    methods: {
        handleLayoutChange(ev){
            console.log(ev,"handleLayoutChange");
            
        },
        // 开始发起请求
        getAllRequestInit() {
            // this.initSetMqttMsgFilter();
            // if (__IS_DEV__) {
            //     this.getMockRequestList(10);
            //     return;
            // }
            // this.enterFullScreenAction();;
            // this.getTodayRemindInfo();
            this.getAlarmInfoRequest();
            this.getScheduleListRequest();
            // this.getTopicListAction();
            this.getPlaceInfo();
            this.handleInitScore();
            this.handleGetWeatherData();
            this.handleGetStockData();
            this.getLifeNoteInfo();
        },
        // 显示webview信息
        setShowWebView(link) {
            if (this.isShowWebView) return;
            if (link) {
                this.webViewLink = link;
            } else {
                this.webViewLink = this.mapWebViewLink;
            }
            // if (__IS_DEV__) {
            //     this.webViewLink = "http://192.168.24.151:8081/#/pages/index/index"
            // }
            this.isShowWebView = true;
            this.$nextTick(() => {
                // 使用缓存
                // Vue.Native.callUIFunction(
                //     this.$refs.iframeWeb,
                //     "keepCache",
                //     [true]
                // );
                Vue.Native.callUIFunction(this.$refs.iframeWeb, "loadUrl", [
                    this.webViewLink,
                    "",
                ]);
            });
        },
        /**
         * 左侧滚动位置
         * @param {*} e
         * 参数
         * data：2024/07/19
         * author: wzl
         */
        onLeftBoxScroll(e) {
            console.log("onLeftBoxScroll", e);
            this.leftOffsetY = e.offsetY;
        },
        // webview加载完成
        onLoad(evt) {
            console.log("setShowWebView:onLoad");
            this.$nextTick(() => {
                atlas.requestFocus(this.$refs.iframeWeb);
            });
        },
        // webview透传消息回调
        onLoadStart() {
            console.log("setShowWebView:onLoadStart");
            // this.$nextTick(() => {
            //     atlas.requestFocus(this.$refs.iframeWeb);
            // });
        },
        // 左侧信息栏上焦
        leftFocusSelectFun(index) {
            this.focusHistoryChange("leftListRef");
            this.leftFcousIndex = index;
        },
        // 左侧信息栏点击
        leftFocusClickFun(index, itemInfo) {
            // if (itemInfo.isCanOpenSchedule) {
            //     this.$emit("goRouterLink", "schedule");
            //     return;
            // }
            console.log("leftFocusClickFun", itemInfo);
            if (itemInfo?.actionType) {
                this.topicsJump(itemInfo);
            }
        },
        // 右侧信息栏上焦
        rightFocusSelectFun(index) {
            this.focusHistoryChange("rightListRef");
            this.rightFocusIndex = index;
        },
        // 右侧信息栏点击
        rightFocusClickFun(index, itemInfo) {
            // 地图点击显示
            if (index === 3) {
                if (this.hasNoLocation) {
                    this.topicsJump({
                        actionType: "image",
                        actionUrl: this.scanImageUrl,
                    });
                } else {
                    this.setShowWebView();
                }
                return;
            }
            this.topicsJump(itemInfo);
        },
        // 头部推荐位上焦
        oneImgFocusAction() {
            this.focusHistoryChange("selectBoxRef");
        },
        // 头部推荐位点击
        oneImgFocusClick() {
            const itemInfo = this.selectDataInfo[this.bannerFocusIndex];
            this.topicsJump(itemInfo);
        },
        /**
         * 获取推荐位信息
         * @param {*}
         * 是否清空对话框上下文
         * data：2024/07/19
         * author: wzl
         */
        getTopicListAction() {
            // 初始化请求数组和数据列表
            let requestArr = [];
            this.selectDataInfo = [];
            this.selectDataList = [];
            // 获取配置中的主题ID列表
            let topicArr = this.allConfig.LEFT_AND_RIGHT_TOPICID || [];
            // 如果配置中存在TOPICID_VALUE，则将其合并到主题ID列表中
            if (this.allConfig.TOPICID_VALUE) {
                topicArr = topicArr.concat(this.allConfig.TOPICID_VALUE);
            }
            // 遍历主题ID列表，为每个主题ID构建请求参数并发送请求
            for (const iterator of topicArr) {
                let params = {
                    desktopId: this.allConfig.DESKTOPID_VALUE,
                    flowId: this.allConfig.FLOWID_VALUE,
                    topicId: iterator,
                };
                // 将请求添加到请求数组
                requestArr.push(server.getNDMSTopicData(params));
            }
            // 使用Promise.all等待所有请求完成
            Promise.all(requestArr).then((result) => {
                console.log("getTopicListAction", result);
                // 在开发环境下，根据配置调整特定主题的数据
                if (__IS_DEV__ && this.isShowBigTopic) {
                    result[4] = result[2];
                }
                // 遍历所有请求的结果
                for (let index = 0; index < result.length; index++) {
                    const res = result[index];
                    if (res.resultCode === "000" && res.data) {
                        const itemsList = res?.data?.items || [];
                        // 左侧推荐位信息
                        if (index === 0) {
                            let leftList = [];
                            // 遍历左侧推荐位的每个项目
                            for (
                                let index2 = 0;
                                index2 < itemsList.length;
                                index2++
                            ) {
                                const element = itemsList[index2];
                                let contentData = {
                                    ...element.contents[0],
                                    contentHeight: element.style.height,
                                    descHeight: element.style.height - 62,
                                    // todayRemindInfo:this.todayRemindInfo.HOME
                                };
                                // 根据开发环境或产品调试配置，调整项目数据
                                if (
                                    (__IS_DEV__ && this.isShowBigTopic) ||
                                    this.allConfig.isProductDebug
                                ) {
                                    let heightList = [174, 206, 334, 185];
                                    contentData.contentImage = `assets/raw/image/left-item-${index2}.png`;
                                    contentData.contentHeight =
                                        heightList[index2];
                                    contentData.descHeight =
                                        contentData.contentHeight - 62;
                                }
                                // 根据配置添加额外的数据
                                if (
                                    contentData.voiceInfo === "IOT" &&
                                    this.alarmInfoData
                                ) {
                                    contentData.alarmInfoData =
                                        this.alarmInfoData;
                                }
                                // if (index2 === 0) {
                                //     contentData.contentHeight = 174;
                                //     // contentData.todayRemindInfo =
                                //     //     this.todayRemindInfo.HOME || {};
                                //     contentData.titleTop = 0;
                                //     contentData.descTop = -10;
                                // }
                                // if (index2 === 1) {
                                //     contentData.contentHeight = 206;
                                //     // contentData.todayRemindInfo =
                                //     //     this.todayRemindInfo.NEARBY || {};
                                //     contentData.titleTop = -30;
                                //     contentData.descTop = -30;
                                // }
                                // if (index2 === 2) {
                                //     contentData.contentHeight = 334;
                                //     // contentData.todayRemindInfo =
                                //     //     this.todayRemindInfo.COMMUNITY || {};
                                //     contentData.titleTop = -32;
                                //     contentData.descTop = -30;
                                // }
                                // if (index2 === 3) {
                                //     contentData.contentHeight = 185;
                                //     // contentData.todayRemindInfo =
                                //     //     this.todayRemindInfo.WORK || {};
                                //     contentData.titleTop = -25;
                                //     contentData.descTop = -26;
                                // }
                                // if (
                                //     contentData.voiceInfo &&
                                //     contentData.voiceInfo === "日程"
                                // ) {
                                //     contentData.isCanOpenSchedule = true;
                                // }
                                leftList.push(contentData);
                            }
                            // 更新左侧推荐位列表
                            this.leftSelectList =
                                this.leftSelectList.concat(leftList);
                            // console.log("this.leftSelectList:",this.leftSelectList)
                            // console.log(
                            //     "this.leftSelectList",
                            //     this.leftSelectList
                            // );
                        } else if (index === 1) {
                            // 右侧推荐位信息
                            let rightList = [];
                            // 遍历右侧推荐位的每个项目
                            for (
                                let index2 = 0;
                                index2 < itemsList.length;
                                index2++
                            ) {
                                const element = itemsList[index2];
                                let contentData = {
                                    ...element.contents[0],
                                    contentHeight: element.style.height,
                                };
                                // 根据开发环境或产品调试配置，调整项目数据
                                if (
                                    (__IS_DEV__ && this.isShowBigTopic) ||
                                    this.allConfig.isProductDebug
                                ) {
                                    let heightList = [156, 111, 156, 240];
                                    contentData.contentImage = `assets/raw/image/right-item-${index2}.png`;
                                    contentData.contentHeight =
                                        heightList[index2];
                                    if (index2 === 1) {
                                        contentData.actionUrl =
                                            itemsList[2].contents[0].actionUrl;
                                    }
                                    if (index2 === 2) {
                                        contentData.actionUrl =
                                            itemsList[1].contents[0].actionUrl;
                                    }
                                }
                                // 根据配置添加额外的数据
                                if (
                                    contentData.voiceInfo === "IOT" &&
                                    this.alarmInfoData
                                ) {
                                    contentData.alarmInfoData =
                                        this.alarmInfoData;
                                }
                                // if (index2 === 0) {
                                //     contentData.contentHeight = 131;
                                // }
                                // if (index2 === 1) {
                                //     contentData.contentImage =
                                //         "assets/raw/image/stockBg.png";
                                // }
                                // if (index2 === 3) {
                                //     contentData.contentHeight = 210;
                                // }
                                // if (
                                //     contentData.voiceInfo &&
                                //     contentData.voiceInfo === "日程"
                                // ) {
                                //     contentData.isCanOpenSchedule = true;
                                // }
                                rightList.push(contentData);
                            }
                            // 更新右侧推荐位列表
                            this.rightSelectList = rightList;
                        } else {
                            let newList = [];
                            // 遍历头部推荐位的每个项目
                            for (
                                let index2 = 0;
                                index2 < itemsList.length;
                                index2++
                            ) {
                                const element = itemsList[index2];
                                // 头部推荐位信息
                                if (index2 === 0) {
                                    var item = element.contents[0];
                                    // 根据配置添加额外的数据
                                    if (
                                        item.voiceInfo === "IOT" &&
                                        this.alarmInfoData
                                    ) {
                                        item.alarmInfoData = this.alarmInfoData;
                                    }
                                    // 根据开发环境配置调整项目数据
                                    if (__IS_DEV__ && index === 3) {
                                        item.voiceInfo = "天气";
                                        item.contentImage =
                                            "assets/raw/image/weatherBg.png";
                                    }
                                    this.selectDataInfo.push(item);
                                } else {
                                    // 中间推荐位信息
                                    let itemInfo = {
                                        ...element.contents[0],
                                        type: "10",
                                    };
                                    // 根据开发环境配置调整项目数据
                                    if (
                                        (__IS_DEV__ && this.isShowBigTopic) ||
                                        this.allConfig.isProductDebug
                                    ) {
                                        if (index2 === 1) {
                                            itemInfo = {
                                                ...itemsList[4].contents[0],
                                                type: "10",
                                            };
                                        }
                                    }
                                    // 日程信息
                                    // 处理日程信息
                                    if (
                                        itemInfo.voiceInfo &&
                                        itemInfo.voiceInfo === "日程"
                                    ) {
                                        itemInfo.type = "12";
                                        // itemInfo.isCanOpenSchedule = true;
                                        this.schedulePositionArr = [
                                            index - 2,
                                            index2 - 1,
                                        ];
                                        if (this.scheduleNowInfo) {
                                            itemInfo.scheduleNowInfoVisible =
                                                "visible";
                                            itemInfo.noScheduleNowInfoVisible =
                                                "invisible";
                                            itemInfo.scheduleNowInfo =
                                                this.scheduleNowInfo;
                                        } else {
                                            itemInfo.scheduleNowInfoVisible =
                                                "invisible";
                                            itemInfo.noScheduleNowInfoVisible =
                                                "visible";
                                        }
                                    }
                                    if (
                                        itemInfo.voiceInfo === "IOT" &&
                                        this.alarmInfoData
                                    ) {
                                        itemInfo.alarmInfoData =
                                            this.alarmInfoData;
                                    }
                                    // 直播视频
                                    // 处理直播视频信息
                                    if (
                                        itemInfo.voiceInfo &&
                                        itemInfo.voiceInfo.indexOf("直播|") > -1
                                    ) {
                                        const paramsArr =
                                            itemInfo.voiceInfo.split("|");
                                        if (paramsArr.length === 2) {
                                            this.uuidValue = paramsArr[1];
                                            itemInfo.uuidValue = paramsArr[1];
                                            itemInfo.type = "11";
                                            this.uuidPositionArr = [
                                                index - 2,
                                                index2 - 1,
                                            ];
                                            this.getProgramListRequest(true);
                                        }
                                    }
                                    // 处理轮播图信息
                                    if (element.contents?.length > 1) {
                                        (itemInfo = element),
                                            (itemInfo.type = "13");
                                    }
                                    newList.push(itemInfo);
                                }
                            }
                            // 更新中间推荐位列表
                            this.selectDataList.push(newList);
                            // console.log(
                            //     "this.selectDataList",
                            //     this.selectDataList
                            // );
                        }
                    }
                }
                // 标记主题列表获取结束
                this.getTopicEnd = true;
                // 等待DOM更新，然后触发后续动作
                this.$nextTick(() => {
                    this.isFirstLoadEnd = true;
                    this.$nextTick(() => {
                        this.selectCreatAction();
                        console.log("leftListRef", this.$refs?.leftListRef);
                    });
                });
                // console.log(
                //     "getTopicListAction",
                //     this.selectDataInfo,
                //     this.selectDataList
                // );
            });
        },
        /**
         * 获取报警信息的请求方法。
         * 该方法用于向服务器请求当前日期的报警信息。如果请求成功并返回了数据，
         * 则将第一个报警信息存储在alarmInfoData中，并触发获取主题列表的操作。
         * 如果请求失败或没有返回数据，也会触发获取主题列表的操作。
         * 这样设计是为了确保页面能够根据报警信息的状态来更新相关内容，
         * 即使没有报警信息也能够正常显示主题列表
         * @param {*}
         * data：2024/07/19
         * author: wzl
         */
        getAlarmInfoRequest() {
            // 构造请求参数，包括当前日期和请求的数据条数限制
            let params = {
                date: moment().format("YYYYMMDD"),
                limit: 1,
            };
            // 发送获取报警信息的请求
            server
                .getAlarmInfo(params)
                .then((res) => {
                    // console.log(
                    //     "getAlarmInfoRequest res:" + JSON.stringify(res)
                    // );
                    // 先清空报警信息数据，以便于更新
                    this.alarmInfoData = null;
                    // 判断请求结果是否成功且有数据返回
                    if (res.resultCode === "000" && res.data?.length) {
                        // 如果有数据，存储第一个报警信息
                        this.alarmInfoData = res.data[0];
                        // 触发获取主题列表的操作

                        this.getTopicListAction();
                    } else {
                        // 如果没有数据，也触发获取主题列表的操作
                        this.getTopicListAction();
                    }
                })
                .catch(() => {
                    // 如果请求失败，打印错误日志并触发获取主题列表的操作
                    console.log("this.getAlarmInfoRequest error");
                    this.getTopicListAction();
                });
        },
        /**
         * 获取今天的提醒信息。
         * 该方法通过调用服务器接口查询今天的提醒信息，并将结果格式化后存储在本地变量中。
         * 如果查询成功，它会更新今天的提醒信息并触发获取主题列表的操作。
         * 如果查询失败，它也会触发获取主题列表的操作。
         * @param {*}
         * data：2024/07/19
         * author: wzl
         */
        // getTodayRemindInfo() {
        //     // 向服务器查询今天的提醒信息
        //     server
        //         .queryTodayRemindInfo()
        //         .then((res) => {
        //             // 在控制台中打印查询结果
        //             console.log(
        //                 "getTodayRemindInfo res:" + JSON.stringify(res)
        //             );
        //             // 初始化今天的提醒信息对象
        //             this.todayRemindInfo = {};
        //             // 遍历查询结果，按提醒类型整理信息
        //             for (let i = 0; i < res.data.length; i++) {
        //                 // 以提醒类型为键，存储提醒信息
        //                 this.todayRemindInfo[res.data[i].type] = res.data[i];
        //             }
        //             // 在控制台中打印整理后的提醒信息
        //             console.log("this.todayRemindInfo:", this.todayRemindInfo);
        //             // 触发获取主题列表的操作
        //             this.getTopicListAction();
        //         })
        //         .catch(() => {
        //             // 在查询失败时，在控制台中记录错误信息
        //             console.log("this.todayRemindInfo error");
        //             // 触发获取主题列表的操作
        //             this.getTopicListAction();
        //         });
        // },
        // 从AI助手获取今日消息通知列表(第一次进入调用)
        getLifeNoteInfo() {
            server
                .getAiAbstractList()
                .then((res) => {
                    if (res && res.resultCode === "000") {
                        this.refreshAbstract(res.data || []);
                        console.log("getLifeNoteInfo:", this.leftSelectList);
                    } else {
                        console.log("getLifeNoteInfo fail:", res);
                    }
                })
                .catch((err) => {
                    console.log("getLifeNoteInfo error:" + err.message);
                });
        },
        // 监听刷新小加摘要消息
        refreshAbstract(data, refreshAction) {
            let noteList = data;
            noteList = noteList.map((item) => {
                let newItem = {
                    ...item,
                    introduction: this.handleAbstractMessage(item.message),
                };
                // 跳转app，需要处理actionUrl,json解析后传入appData
                if (
                    item.actionType == "app" &&
                    typeof item.actionUrl == "string"
                ) {
                    newItem.appData = JSON.parse(item.actionUrl);
                }
                return newItem;
            });
            noteList = noteList.filter((item) => !!item.introduction);
            this.leftSelectList = [
                ...noteList,
                ...this.leftSelectList.slice(this.leftNoteLen),
            ];
            //设置消息数量
            this.leftNoteLen = noteList.length;
            this.lifeNoteList = data;
            // 消息刷新时触发提醒动画
            if (refreshAction) {
                this.lottieviewNoteRefreshAction();
            }
        },
        // 消息具体内容处理
        handleAbstractMessage(data) {
            let result = "";
            if (data?.dailyData?.length) {
                // 获取当前时间的Moment对象,minuteNow只保留到分钟级别的时间
                const now = moment();
                const minuteNow = moment().startOf("minute");
                // 获取当前时间加一个小时后的Moment对象
                const oneHourLater = moment().add(1, "hour");
                // 符合当前时间段的日程
                let curDailyData = [];
                // 限制5个符合当前时间段的日程
                for (let i = 0; i < data.dailyData.length; i++) {
                    let itemDaily = data.dailyData[i];
                    let itemMoment = moment(
                        `${itemDaily.date}T${itemDaily.time}`,
                        "YYYYMMDDTHH:mm:ss"
                    );
                    if (
                        itemMoment.isBetween(
                            minuteNow,
                            oneHourLater,
                            undefined,
                            "[]"
                        )
                    ) {
                        if (curDailyData.length >= 5) {
                            break;
                        }
                        itemDaily["momentTime"] = itemMoment;
                        curDailyData.push(itemDaily);
                    }
                }
                // 按日程提醒时间排序
                curDailyData.sort((a, b) => {
                    const momentA = a.momentTime;
                    const momentB = b.momentTime;
                    return momentA.isBefore(momentB)
                        ? -1
                        : momentA.isAfter(momentB)
                        ? 1
                        : 0;
                });
                if (curDailyData.length) {
                    result = curDailyData.map((item) => {
                        return `${item.time} ${item.event}`;
                    });
                }
                // 计算最近一个日程提醒时间与当前时间之间的毫秒差
                let millisecondsDifference = curDailyData.length
                    ? curDailyData[0].momentTime.diff(now)
                    : -1;
                // 没有要提醒的消息，重新设置为1小时刷新
                if (millisecondsDifference == -1) {
                    millisecondsDifference = 36e5;
                } else if (millisecondsDifference < 0) {
                    millisecondsDifference = minuteNow
                        .add(1, "minutes")
                        .diff(now);
                } else {
                    // 到日程提醒时间的一分钟之后，不展示此条日程
                    millisecondsDifference = millisecondsDifference + 6e4;
                }
                // 定时刷新消息通知中的今日日程
                if (this.lifeNoteRefreshInterval) {
                    clearInterval(this.lifeNoteRefreshInterval);
                    this.lifeNoteRefreshInterval = null;
                }
                if (millisecondsDifference) {
                    console.log(
                        "open lifeNoteRefreshInterval,intervale:" +
                            millisecondsDifference
                    );
                    this.lifeNoteRefreshInterval = setInterval(() => {
                        if (this.lifeNoteRefreshInterval) {
                            clearInterval(this.lifeNoteRefreshInterval);
                            this.lifeNoteRefreshInterval = null;
                        }
                        console.log("start refreshAbstract function");
                        this.refreshAbstract(
                            this.lifeNoteList,
                            !(curDailyData.length - 1)
                        );
                    }, millisecondsDifference);
                }
            } else {
                result = data?.content || "";
            }
            return result;
        },
        /**
         * 获取日程列表的请求函数。
         * 该函数用于向服务器请求当前的日程列表，并根据返回的数据更新界面显示。
         * 在开发环境中，会额外添加测试用的uid参数。
         * @param {*}
         * data：2024/07/19
         * author: wzl
         */
        getScheduleListRequest() {
            // 获取当前日期，用于筛选日程
            let nowTime = moment().format("YYYYMMDD");
            // 构建请求参数
            let params = {
                date: nowTime,
            };
            // 如果在开发环境，添加测试用的uid参数
            if (__IS_DEV__) {
                params.uid = "1133581786";
            }
            // 发送请求获取日程列表
            server
                .getScheduleList(params)
                .then((res) => {
                    // 如果请求成功且返回结果码为"000"
                    if (res && res.resultCode === "000") {
                        // 初始化待显示的日程列表
                        let list = res.data || [];
                        let newContentList = [];
                        // 遍历日程列表，筛选出状态为待处理且应显示在今日的日程
                        for (const iterator of list) {
                            if (
                                iterator.status &&
                                iterator.status == "PENDING"
                            ) {
                                // 处理时间格式，并添加额外的信息
                                let info = {
                                    ...iterator,
                                    timeValue: iterator.time
                                        ? iterator.time.substring(0, 5)
                                        : "",
                                    toDayValue: `${moment().format(
                                        "MM月DD日"
                                    )}`,
                                };
                                newContentList.push(info);
                            }
                        }
                        // 获取当前时间，用于确定当前进行中的日程
                        let nowHourTime = moment().format("HH:mm");
                        // 查找当前时间后第一个待处理的日程
                        let newScheduleNowInfo = newContentList.find(
                            (item) => item.timeValue >= nowHourTime
                        );
                        // if (this.scheduleNowInfo) {
                        //     newScheduleNowInfo = newContentList.find(
                        //         (item) => item.timeValue >= nowHourTime
                        //     );
                        // }
                        // 更新当前进行中的日程信息
                        if (newScheduleNowInfo) {
                            this.scheduleNowInfo = newScheduleNowInfo;
                        } else if (this.scheduleNowInfo) {
                            this.scheduleNowInfo = null;
                        }
                        // 如果有选中的日程列表项且选中的列表项有子项
                        if (
                            this.selectDataList.length &&
                            this.$refs.selectBoxWrap
                        ) {
                            // 根据存储的索引值获取对应的列表项和子项
                            const index1Value = this.schedulePositionArr[0];
                            const index2Value = this.schedulePositionArr[1];
                            let oldList = this.selectDataList[index1Value];
                            if (oldList.length && oldList[index2Value]) {
                                let oldItem = oldList[index2Value];
                                // if (__IS_DEV__) {
                                //     this.scheduleNowInfo.event = "啊师傅大撒反对的萨芬撒旦"
                                // }
                                // 更新日程相关信息，并根据是否有当前进行中的日程调整显示状态
                                oldItem.scheduleNowInfo = this.scheduleNowInfo;
                                oldItem.scheduleNowInfoVisible = this
                                    .scheduleNowInfo
                                    ? "visible"
                                    : "invisible";
                                oldItem.noScheduleNowInfoVisible = this
                                    .scheduleNowInfo
                                    ? "invisible"
                                    : "visible";
                                // 更新列表项，并根据焦点位置更新选中项
                                oldList[index2Value] = oldItem;
                                this.selectDataList[index1Value] = oldList;
                                if (this.bannerFocusIndex === index1Value) {
                                    this.selectList =
                                        this.selectDataList[
                                            this.bannerFocusIndex
                                        ];
                                    this.$refs.selectBoxWrap?.updateItemSelectList(
                                        index2Value,
                                        oldItem
                                    );
                                }
                            }
                        }
                        // 日志输出，用于调试
                        // console.log(
                        //     "getScheduleListRequest",
                        //     this.scheduleNowInfo
                        // );
                    }
                })
                .catch((error) => {
                    // 错误处理，输出错误日志
                    console.log("getScheduleListRequest:catch", error);
                });
        },
        /**
         * 获取直播节目列表的请求方法。
         * @param {boolean} isUpdate - 是否更新节目列表的标志。
         * 此方法用于向服务器请求当前日期的直播节目列表，并根据返回的结果更新节目列表和显示时间。
         * 如果请求成功并返回了有效的节目数据，则会更新节目列表和记录请求的时间，
         * 同时根据是否需要更新标志来决定是否创建定时任务来周期性地更新节目列表。
         * data：2024/07/19
         * author: wzl
         */
        // 获取直播节目
        getProgramListRequest(isUpdate) {
            // 获取当前日期的字符串格式，用于请求当天的节目列表
            let nowTime = moment().format("YYYY-MM-DD");
            // 构建请求参数，包括查询的起始和结束日期以及设备的UUID
            let params = {
                startDate: nowTime,
                endDate: nowTime,
                uuid: this.uuidValue,
            };
            // 发送获取节目列表的请求
            server
                .getProgramList(params)
                .then((res) => {
                    // console.log(
                    //     "getProgramListRequest res:" + JSON.stringify(res)
                    // );
                    // 如果请求成功并返回了有效的结果
                    if (res.resultCode === "000" && res?.content?.length) {
                        // 获取PHDTV中文节目列表
                        let phtvChineseList = res.content[0]?.programs;
                        // 如果节目列表不为空
                        if (phtvChineseList && phtvChineseList.length) {
                            // 处理节目列表，添加每项的开始和结束时间的文本表示
                            let newList = [];
                            for (
                                let index = 0;
                                index < phtvChineseList.length;
                                index++
                            ) {
                                const element = phtvChineseList[index];
                                // 添加开始和结束时间的文本格式到节目信息中
                                let info = {
                                    ...element,
                                    startTimeText: moment(
                                        new Date(element.startTime * 1e3)
                                    ).format("HH:mm"),
                                    endTimeText: moment(
                                        new Date(element.endTime * 1e3)
                                    ).format("HH:mm"),
                                };
                                // 根据开始和结束时间生成格式化的时段字符串
                                info.startAndEndTime = `${info.startTimeText}-${info.endTimeText}`;
                                newList.push(info);
                            }
                            // 更新节目列表和请求时间
                            this.phtvChineseList = newList;
                            this.programToDayTime = nowTime;
                            // 根据是否需要更新标志来创建定时任务更新节目列表
                            this.creatProgramInterval(isUpdate);
                        }
                    }
                })
                .catch(() => {
                    // 如果请求失败，打印错误信息
                    console.log("getProgramListRequest error");
                });
        },
        // 当前直播节目定时更新
        creatProgramInterval(isUpdate) {
            this.clearUpdateProgramInterval();
            if (isUpdate) {
                this.updateProgramInfCheck();
            }
            this.updateProgramInterval = setInterval(() => {
                // 每分钟判断下
                if (String(new Date()).indexOf(":00") > -1) {
                    let nowTime = moment().format("YYYY-MM-DD");
                    if (this.programToDayTime != nowTime) {
                        this.getProgramListRequest(true);
                    } else {
                        this.updateProgramInfCheck();
                    }
                }
            }, 1000);
        },
        /**
         * 根据当前时间更新直播节目信息。
         * 该方法用于检查当前时间是否处于某个直播节目的时间段内，如果是，则更新当前的直播节目信息。
         * 这对于显示正确的直播节目信息和更新用户界面非常重要。
         * data：2024/07/19
         * author: wzl
         */
        updateProgramInfCheck() {
            // 获取当前时间的Unix时间戳
            // 获取今天时间
            let nowHourTime = moment().unix();
            // 检查是否有有效的节目信息，并且当前时间是否在今天的节目时间段之外
            if (
                !this.phtvChineseInfo ||
                (this.phtvChineseInfo &&
                    nowHourTime > this.phtvChineseInfo.startTime &&
                    nowHourTime > this.phtvChineseInfo.endTime)
            ) {
                // 在节目列表中查找当前时间对应的节目信息
                const nowInfo = this.phtvChineseList.find(
                    (item) =>
                        item.startTime <= nowHourTime &&
                        nowHourTime < item.endTime
                );
                // 输出调试信息
                console.log(
                    "updateProgramInfCheck",
                    nowInfo,
                    nowHourTime,
                    this.uuidPositionArr
                );
                // 如果找到了当前时间对应的节目信息
                if (nowInfo) {
                    // 更新当前的直播节目信息
                    this.phtvChineseInfo = nowInfo;
                    // 获取uuidPositionArr中的索引值
                    const index1Value = this.uuidPositionArr[0];
                    const index2Value = this.uuidPositionArr[1];
                    // 获取selectDataList中对应索引的列表
                    let oldList = this.selectDataList[index1Value];
                    // 如果列表不为空且索引在范围内
                    if (oldList.length && oldList[index2Value]) {
                        // 获取列表中对应索引的项目
                        let oldItem = oldList[index2Value];
                        // 更新该项目的直播节目信息
                        oldItem.phtvChineseInfo = this.phtvChineseInfo;
                        // 将更新后的项目放回列表中
                        oldList[index2Value] = oldItem;
                        // 更新selectDataList中对应索引的列表
                        this.selectDataList[index1Value] = oldList;
                        // 如果焦点在推荐列表上且大主题显示
                        if (
                            this.bannerFocusIndex === 0 &&
                            this.isShowBigTopic
                        ) {
                            // 触发推荐列表组件的节目信息变更方法
                            this.$refs?.RecommendListWrap?.phtvChineseInfoChange(
                                this.phtvChineseInfo
                            );
                        } else if (this.bannerFocusIndex === index1Value) {
                            // 更新选中列表
                            this.selectList =
                                this.selectDataList[this.bannerFocusIndex];
                            // 触发选中框组件的更新方法
                            this.$refs.selectBoxWrap?.updateItemSelectList(
                                index2Value,
                                oldItem
                            );
                        }
                    }
                }
            }
        },
        // 清除直播节目更新定时器
        clearUpdateProgramInterval() {
            if (this.updateProgramInterval) {
                clearInterval(this.updateProgramInterval);
                this.updateProgramInterval = null;
            }
        },
        async getPlaceInfo() {
            this.mapWebViewLink = this.allConfig.MAP_GUI_URL;
            const addressInfo = await server.getAddressInfos();
            console.log("addressinfo:" + JSON.stringify(addressInfo));
            if (!addressInfo.origin || !addressInfo.destination) {
                this.hasNoLocation = true;
                return;
            }
            this.hasNoLocation = false;
            this.showPlaceName =
                addressInfo?.destItem?.detail ||
                Store.getData("allConfigs").showPlaceName;
            Promise.all([
                server.getPlaceRoad(),
                server.getPlaceDriving({
                    origin: addressInfo.origin,
                    destination: addressInfo.destination,
                }),
            ]).then((res) => {
                console.log("getPlaceInfo res:", res);
                const res1Route = res && res[1] && res[1]?.route;
                if (
                    res1Route &&
                    res1Route.paths &&
                    res1Route.paths[0] &&
                    res1Route.paths[0].duration
                ) {
                    console.log("get toTime");
                    this.toTime = Math.ceil(res1Route.paths[0].duration / 60);
                }
                if (
                    (__IS_DEV__ && this.isShowBigTopic) ||
                    this.allConfig.isProductDebug
                ) {
                    this.description = "河西大街有100米拥堵";
                }
                if (
                    res &&
                    res[0] &&
                    res[0].trafficinfo &&
                    res[0].trafficinfo.description
                ) {
                    this.description = res[0].trafficinfo.description;
                    this.descriptionHeigt = Math.min(
                        (this.description.length / 8) * 25,
                        60
                    );
                    // this.descriptionTextHeigt = (this.description.length / 8) * 30;
                    this.roadIcon = res[0].trafficinfo.evaluation?.status;
                }
                // 是否已经有终点和起点
                if (res1Route?.origin && res1Route?.destination) {
                    console.log(
                        "updateMapGuiLink:1",
                        res1Route.origin,
                        res1Route.destination
                    );
                    this.updateMapGuiLink(
                        res1Route.origin,
                        res1Route.destination
                    );
                } else if (res1Route?.destination) {
                    // 如果只有终点，获取起点
                    this.getUserInfoLatLngAction(res1Route?.destination);
                }
            });
        },
        // 中间推荐位
        selectCreatAction(isChange) {
            this.$refs?.selectBoxWrap?.resetFocusSelect();
            this.oneImageSrc = "";
            this.selectList = this.selectDataList[this.bannerFocusIndex];
            if (this.bannerFocusIndex === 0 && this.isShowBigTopic) {
                this.$refs.RecommendListWrap?.updateBannerList(this.selectList);
            } else {
                this.$refs?.selectBoxWrap?.updateTvList(this.selectList);
                if (this.selectDataInfo[this.bannerFocusIndex]?.contentImage) {
                    this.oneDataInfo =
                        this.selectDataInfo[this.bannerFocusIndex];
                    this.oneImageSrc =
                        this.selectDataInfo[this.bannerFocusIndex].contentImage;
                }
            }
            console.log("oneImageSrc", this.oneImageSrc);
            if (
                isChange &&
                this.bannerFocusIndex === 3 &&
                !this.isShowLottieviewQipao
            ) {
                this.lottieviewQipaoAction();
            }
            if (
                isChange &&
                this.bannerFocusIndex === 0 &&
                this.isShowBigTopic
            ) {
                this.clearLottieViewTimer();
                this.clearLottieViewTimer2();
                this.lottieViewTimer2 = setTimeout(() => {
                    this.lottieviewAction();
                }, 500);
            } else {
                this.isShowLottieview5 = false;
                this.isShowLottieview10 = false;
                this.clearLottieViewTimer();
                this.clearLottieViewTimer2();
            }
        },
        // 积分动画展示
        lottieviewAction(num) {
            // 展示动画
            this.clearLottieViewTimer();
            let lottieview;
            if (num === 5) {
                this.isShowLottieview5 = true;
                lottieview = this.$refs.lottieviewF.$el;
            } else if (num === 10) {
                this.isShowLottieview10 = true;
                lottieview = this.$refs.lottieviewT.$el;
            }
            if (lottieview) {
                this.$nextTick(() => {
                    Vue.Native.callUIFunction(lottieview, "play", []);
                });
            }
            this.lottieViewTimer = setTimeout(() => {
                this.isShowLottieview5 = false;
                this.isShowLottieview10 = false;
            }, 2000);
        },
        // 清除动画
        clearLottieViewTimer() {
            if (this.lottieViewTimer) {
                clearTimeout(this.lottieViewTimer);
                this.lottieViewTimer = null;
            }
        },
        // 清除动画
        clearLottieViewTimer2() {
            if (this.lottieViewTimer2) {
                clearTimeout(this.lottieViewTimer2);
                this.lottieViewTimer2 = null;
            }
        },
        // 气泡动画展示
        lottieviewQipaoAction() {
            // 展示动画
            this.clearLottieViewQipaoTimer();
            this.isShowLottieviewQipao = true;
            let lottieviewQipao = this.$refs.lottieviewQipao.$el;
            this.$nextTick(() => {
                Vue.Native.callUIFunction(lottieviewQipao, "play", []);
            });
            this.lottieViewQipaoTimer = setTimeout(() => {
                this.isShowLottieviewQipao = false;
                this.clearLottieViewQipaoTimer();
            }, 5000);
        },
        // 清除气泡动画
        clearLottieViewQipaoTimer() {
            if (this.lottieViewQipaoTimer) {
                clearTimeout(this.lottieViewQipaoTimer);
                this.lottieViewQipaoTimer = null;
            }
        },
        // 今日消息通知刷新提醒动画展示
        lottieviewNoteRefreshAction() {
            // 展示动画
            this.clearLottieviewNoteRefreshTimer();
            this.isShowLottieviewNoteRefresh = true;
            let lottieviewNoteRefresh = this.$refs.lottieviewNoteRefresh.$el;
            this.$nextTick(() => {
                Vue.Native.callUIFunction(lottieviewNoteRefresh, "play", []);
            });
            this.lottieViewNoteRefreshTimer = setTimeout(() => {
                this.isShowLottieviewNoteRefresh = false;
                this.clearLottieviewNoteRefreshTimer();
            }, 3000);
        },
        clearLottieviewNoteRefreshTimer() {
            if (this.lottieViewNoteRefreshTimer) {
                clearTimeout(this.lottieViewNoteRefreshTimer);
                this.lottieViewNoteRefreshTimer = null;
            }
        },
        // 关闭导航并上焦到当前页面
        enterFullScreenAction() {
            console.log("enterFullScreenAction:start");
            this.$emit("enterFullScreenAction");
            setTimeout(() => {
                this.lottieviewQipaoAction();
                this.lottieviewAction();
            }, 500);
        },
        // 全屏图片上焦
        allseenFocusAction() {},
        // 全屏图片点击
        allseenFocusClick() {},
        // 推荐位跳转
        topicsJump(data) {
            // if (this.focusSelectIndex === 0) {
            //     data.actionType = "ps",
            //     data.actionUrl = this.allConfig.DETAIL_ROUTE_LINK
            // } else {
            //     data.actionUrl = this.allConfig.LIVE_ROUTE_LINK
            // }
            console.log("topicsJump", data);
            const userTextValue =
                data?.todayRemindInfo?.quickReply || data?.voiceTitle;
            console.log(
                "topicsJump",
                data.actionType,
                data.actionUrl,
                userTextValue
            );
            // 拉起jarvis对话apk
            if (userTextValue) {
                let msgList = [{ key: "userText", value: userTextValue }];
                atlas.sendBroadcast(msgList);
            }
            // if (
            //     ["leftListRef", "rightListRef"].includes(this.focusHistoryRef)
            // ) {
            //     this.addScoreUnitFlag = 10;
            // } else {
            //     this.addScoreUnitFlag = 5;
            // }
            switch (data.actionType) {
                case "image":
                    this.jumpDataInfo = data;
                    this.isShoeImageScreen = true;
                    this.$nextTick(() => {
                        atlas.requestFocus(this.$refs.allseenRef);
                    });
                    break;
                case "ps":
                    var _url = {
                        p1: "OpenUrl",
                        p2: `${this.allConfig.JUMP_DETAIL_URL}${data.actionUrl}`,
                        p3: "",
                    };
                    atlas.goCommonJump(_url);
                    break;
                case "switchFlow":
                    atlas
                        .onLauncherCall("switchFlow", data.actionUrl)
                        .then((res) => {
                            console.log("switchFlow:res=====", res);
                        });
                    break;
                default:
                    dataUtils.recommendJump(data);
                    break;
            }
        },
        // 绑定事件
        onEvent() {
            this.app.$on("onIntercept", this.handleInterceptKeyDown);
            this.app.$on("nativeOnKeyDown", this.listenerKey);
            this.app.$on("hardwareBackPress", this.backPress);
            this.app.$on("LifecycleChange", this.lifecycleChange);
        },
        // 绑定事件
        offEvent() {
            this.app.$off("onIntercept", this.handleInterceptKeyDown);
            this.app.$off("nativeOnKeyDown", this.listenerKey);
            this.app.$off("hardwareBackPress", this.backPress);
            this.app.$off("LifecycleChange", this.lifecycleChange);
        },
        // 按键监听
        listenerKey(e) {
            const { keyCode } = e;
            const { KEYCODE } = utils;
            // 瀑布流往下
            console.log(keyCode,"listenerKey");
            if (keyCode === KEYCODE.FLOW_DOWN) {
                this.enterFullScreenAction();
                return;
            }
            // 焦点丢失到lancher
            if (keyCode === KEYCODE.EXCEPTION) {
                this.resetFocusAction();
            }
        },
        // 焦点监听
        handleInterceptKeyDown(e) {
            const { msgId, keyCode } = e;
            const { KEYCODE } = utils;
            console.log("handleInterceptKeyDown:msgId", msgId);
            // 拦截选集面板
            if (msgId === "headerBannerList") {
                if (keyCode === KEYCODE.RIGHT) {
                    // this.bannerFocusIndex =
                    //     this.bannerFocusIndex + 1 > 3
                    //         ? 0
                    //         : this.bannerFocusIndex + 1;
                    // this.$refs?.HeaderBannerWrap?.compSetFocus(
                    //     this.bannerFocusIndex
                    // );
                    this.$refs?.HeaderBannerWrap?.focusBlurFun();
                    atlas.requestFocus(this.$refs.rightListRef);
                } else if (keyCode === KEYCODE.LEFT) {
                    // this.bannerFocusIndex =
                    //     this.bannerFocusIndex - 1 < 0
                    //         ? 3
                    //         : this.bannerFocusIndex - 1;
                    // this.$refs?.HeaderBannerWrap?.compSetFocus(
                    //     this.bannerFocusIndex
                    // );
                    this.$refs?.HeaderBannerWrap?.focusBlurFun();
                    atlas.requestFocus(this.$refs.leftListRef);
                } else if (
                    keyCode === KEYCODE.UP &&
                    this.entryPage?.flowType === "QUICK_APP"
                ) {
                    this.backPress();
                } else if (keyCode === KEYCODE.DOWN) {
                    if (this.bannerFocusIndex === 0 && this.isShowBigTopic) {
                        this.compSetFocus();
                    } else {
                        this.$refs?.selectBoxWrap?.compSetFocus(0);
                    }
                    // this.compSetFocus();
                    this.$refs?.HeaderBannerWrap?.focusBlurFun();
                }
            }
            if (msgId === "oneImgFocus") {
                console.log("oneImgFocus", keyCode === KEYCODE.DOWN);
                if (keyCode === KEYCODE.RIGHT) {
                    // if (this.rightFocusIndex > 1) {
                    //     atlas.requestChildFocus(this.$refs.rightListRef, 0);
                    // } else {
                    //     atlas.requestFocus(this.$refs.rightListRef);
                    // }
                    atlas.requestFocus(this.$refs.rightListRef);
                } else if (keyCode === KEYCODE.LEFT) {
                    // if (this.leftFcousIndex > 1) {
                    //     atlas.requestChildFocus(this.$refs.leftListRef, 0);
                    // } else {
                    //     atlas.requestFocus(this.$refs.leftListRef);
                    // }
                    atlas.requestFocus(this.$refs.leftListRef);
                } else if (keyCode === KEYCODE.UP) {
                    this.$refs?.HeaderBannerWrap?.compSetFocus();
                } else if (keyCode === KEYCODE.DOWN) {
                    this.compSetFocus();
                }
            }
            if (msgId === "selectListFocus" || msgId === "recommendListFocus") {
                if (keyCode === KEYCODE.UP) {
                    // if (this.bannerFocusIndex === 0 && this.isShowBigTopic) {
                    //     this.$refs?.HeaderBannerWrap?.compSetFocus();
                    // } else {
                    //     atlas.requestFocus(this.$refs.oneImgRef);
                    // }
                    this.$refs?.HeaderBannerWrap?.compSetFocus();
                } else if (keyCode === KEYCODE.RIGHT) {
                    // if (this.rightFocusIndex < 2) {
                    //     atlas.requestChildFocus(this.$refs.rightListRef, 2);
                    // } else {
                    //     atlas.requestFocus(this.$refs.rightListRef);
                    // }
                    atlas.requestFocus(this.$refs.rightListRef);
                    //  atlas.requestChildFocus(this.$refs.bannerListRef, focusIndex);
                } else if (keyCode === KEYCODE.LEFT) {
                    // atlas.requestFocus(this.$refs.leftListRef);
                    // if (this.leftFcousIndex < 2) {
                    //     atlas.requestChildFocus(this.$refs.leftListRef, 2);
                    // } else {
                    //     atlas.requestFocus(this.$refs.leftListRef);
                    // }
                    atlas.requestFocus(this.$refs.leftListRef);
                }
            }
            if (msgId === "leftListFocus") {
                if (keyCode === KEYCODE.RIGHT) {
                    if (this.leftFcousIndex === 0) {
                        this.$refs?.HeaderBannerWrap?.compSetFocus();
                    } else if (
                        this.leftFcousIndex > 1 ||
                        (this.bannerFocusIndex === 0 && this.isShowBigTopic)
                    ) {
                        this.compSetFocus();
                    } else {
                        // atlas.requestFocus(this.$refs.selectBoxWrap);
                        // this.$refs?.selectBoxWrap?.resetFocusSelect();
                        this.compSetFocus();
                    }
                }
            }
            if (msgId === "rightListFocus") {
                console.log("rightListFocus", keyCode === KEYCODE.LEFT);
                if (keyCode === KEYCODE.LEFT) {
                    if (this.rightFocusIndex === 0) {
                        this.$refs?.HeaderBannerWrap?.compSetFocus();
                    } else if (
                        this.rightFocusIndex > 1 ||
                        (this.bannerFocusIndex === 0 && this.isShowBigTopic)
                    ) {
                        this.compSetFocus();
                    } else {
                        // atlas.requestFocus(this.$refs.selectBoxWrap);
                        // this.$refs?.selectBoxWrap?.resetFocusSelect();
                        this.compSetFocus();
                    }
                }
            }
        },
        // 返回监听
        backPress() {
            if (this.isShoeImageScreen) {
                this.resetFocusAction();
                this.isShoeImageScreen = false;
                this.jumpDataInfo = null;
                return;
            }
            if (this.isShowWebView) {
                this.resetFocusAction();
                this.isShowWebView = false;
                // if (this.route.name === "newMerchant") {
                //     this.$refs?.newMerchantWrap?.compSetFocus();
                // }
                return;
            }
            if (this.route.name !== "home") {
                if (this.isShowCenterStatus) {
                    this.route.name = "home";
                    this.$nextTick(() => {
                        this.resetFocusAction();
                    });
                    return;
                } else {
                    this.route.name = "home";
                    this.$nextTick(() => {
                        this.resetFocusAction();
                    });
                }
            }
            if (this.entryPage?.flowType === "QUICK_APP") {
                console.log("backPress:action");
                // 取消banner上焦效果
                this.$refs?.HeaderBannerWrap?.focusCancleFun();
                // 退出全屏模式
                atlas.onLauncherCall("exitFullScreen");
                // 需要上焦到flow
                atlas.onLauncherCall("focusNavTab");
                this.$emit("onFocusNavTab");
            } else {
                this.clearSetMqttMsgFilter();
                atlas.backPress();
            }
        },
        // 恢复焦点
        resetFocusAction() {
            if (
                this.focusHistoryRef === "selectBoxRef" ||
                this.focusHistoryRef === "RecommendListWrap"
            ) {
                this.compSetFocus();
            } else if (this.focusHistoryRef === "HeaderBannerWrap") {
                this.$refs[this.focusHistoryRef]?.compSetFocus();
            } else {
                atlas.requestFocus(this.$refs[this.focusHistoryRef]);
            }
            console.log("resetFocusAction", this.route.name);
        },
        // 页面监听
        lifecycleChange(evt) {
            console.log("LifecycleChange:====home", evt);
            if (evt === "onResume") {
                this.initSetMqttMsgFilter();
                // this.handleAddScore(this.addScoreUnitFlag);
                this.handleInitScore();
                this.handleGetStockData();
            } else if (evt === "onPause") {
                this.clearSetMqttMsgFilter();
            }
        },
        // 股票信息
        handleGetStockData() {
            API.getStockInfo()
                .then((res) => {
                    if (res.result && res.result.length > 0) {
                        res = res.result.map((item) => {
                            let itemStock = item[0];
                            return {
                                currentPrice: itemStock?.price,
                                name:
                                    itemStock?.localizedAttributes &&
                                    itemStock?.localizedAttributes["zh-cn"]
                                        ?.shortName,
                                priceChangePercent:
                                    itemStock.priceChangePercent + "%",
                                changeImg:
                                    itemStock.priceChangePercent > 0
                                        ? "assets/raw/image/stock-up.png"
                                        : "assets/raw/image/stock-down.png",
                                color:
                                    itemStock.priceChangePercent > 0
                                        ? "#e74c3b"
                                        : "#65C366",
                            };
                        });
                        this.firstStock = res[0];
                        if (res[1]) {
                            this.secondStock = res[1];
                        }
                    }
                })
                .catch((err) => {
                    console.log("handleGetStockData error:" + err.message);
                });
        },
        // 积分信息
        handleInitScore() {
            API.getMyPointInfo()
                .then((res) => {
                    this.score = (res.body && res.body.availableAmount) || 0;
                    Store.setData("myScore", this.score, true);
                })
                .catch((err) => {
                    console.log("getMyScore error：" + err.message);
                });
        },
        // 积分增加
        handleAddScore(num) {
            this.score += num;
            Store.setData("myScore", this.score, true);
            if (num === 10) {
                // +10动画
                setTimeout(() => {
                    this.lottieviewAction(10);
                }, 500);
            }
            if (num === 5) {
                // +5动画
                setTimeout(() => {
                    this.lottieviewAction(5);
                }, 500);
            }
            this.addScoreUnitFlag = 0;
        },
        // 天气信息
        handleGetWeatherData() {
            // 获取当天日期
            this.todayDate = utils.formatDate(new Date(), "YYYY-MM-DD");
            console.log("todayDate", this.todayDate);
            API.getWeather().then((res) => {
                const weather = JSON.parse(res?.data?.weather ?? "{}");
                const daily = weather?.result?.daily ?? {};
                // 气温列表
                const temperatureList = daily.temperature ?? [];
                // 天气表述列表
                const skycon = daily.skycon ?? [];
                // 当天风力风向数据
                const windToday = daily.wind[0];
                this.locationAreaName = res?.data?.name ?? "";
                // 获取后面五天数据
                for (var i = 1; i < 6; i++) {
                    this.otherDayWeather.push({
                        dayText: utils.getDayText(skycon[i].date),
                        skyconImg: `assets/raw/image/${skycon[
                            i
                        ].value?.toLowerCase()}.png`,
                        temperatureText: `${Math.round(
                            temperatureList[i].min
                        )}~${Math.round(temperatureList[i].max)}­°C`,
                    });
                }
                const nowImgs = [
                    "clear_day",
                    "cloudy",
                    "partly_cloudy_day",
                    "rain",
                ];
                const todaySkycon = nowImgs.includes(
                    skycon[0].value?.toLowerCase()
                )
                    ? skycon[0].value?.toLowerCase()
                    : "cloudy";
                this.todayWeather = {
                    skyconText: utils.mapSkyconToText(skycon[0].value),
                    skyconImg: `assets/raw/image/${todaySkycon}.png`,
                    temperatureText: `${Math.round(
                        temperatureList[0].min
                    )}~${Math.round(temperatureList[0].max)}­°C`,
                    windText: utils.getWindText(windToday),
                };
            });
        },
        // 上焦历史信息
        focusHistoryChange(ref) {
            this.$emit("focusHistoryChange", ref);
        },
        compSetFocus() {
            if (this.bannerFocusIndex === 0 && this.isShowBigTopic) {
                this.$refs.RecommendListWrap.compSetFocus();
            } else {
                this.$refs?.selectBoxWrap?.compSetFocus();
            }
        },
        resetCompSetFocus(index) {
            console.log(
                "enterFullScreenAction:resetCompSetFocus",
                this.$refs?.HeaderBannerWrap
            );
            this.$refs?.HeaderBannerWrap?.compSetFocus(index);
        },
        queryGradientBackground(index) {
            const colorsIndex = index % this.colorsList.length;
            return {
                type: 0,
                shape: 0,
                colors: this.colorsList[colorsIndex],
                cornerRadius: 6,
            };
        },
        getUserInfoLatLngAction(destination) {
            server.getUserInfoLatLng().then((res) => {
                if (res?.data?.commonInfo) {
                    this.userCommonInfo = res.data.commonInfo;
                    const originValue = `${this.userCommonInfo.villageLongitude},${this.userCommonInfo.villageLatitude}`;
                    console.log("updateMapGuiLink:2", originValue, destination);
                    this.updateMapGuiLink(originValue, destination);
                }
            });
        },
        updateMapGuiLink(startLngLat, endLngLat) {
            this.mapWebViewLink = `${this.allConfig.MAP_GUI_URL}&startLngLat=${startLngLat}&endLngLat=${endLngLat}`;
        },
        // 关掉弹框
        handleFocusNavTab() {
            if (this.isShoeImageScreen || this.isShowWebView) {
                this.backPress();
            }
        },
        // 初始化mqtt消息拦截器
        initSetMqttMsgFilter() {
            const data = [
                {
                    type: 100012,
                },
            ];
            console.log("initSetMqttMsgFilter:", JSON.stringify(data));
            atlas.setMqttMsgFilter(data);
            this.app.$on("mqttMsgOnArrived", this.onMqttMsgOnArrived);
        },
        clearSetMqttMsgFilter() {
            atlas.clearMqttMsgFilter();
            this.app.$off("mqttMsgOnArrived", this.onMqttMsgOnArrived);
        },
        // mqtt接收消息
        onMqttMsgOnArrived(evt) {
            console.log("onMqttMsgOnArrived:evt", typeof evt);
            try {
                const { type, body } = evt;
                let bodyInfo =
                    body && typeof body == "string" ? JSON.parse(body) : body;
                console.log(
                    "onMqttMsgOnArrived:intentData",
                    type,
                    JSON.stringify(bodyInfo)
                );
                if (type === 100012 && bodyInfo) {
                    // 寻找对应消息类型的索引
                    let index = this.lifeNoteList.findIndex((item) => {
                        return bodyInfo.type == item.type;
                    });
                    // 若索引为-1时将通知的消息插入列表，否则替换原有数据
                    if (index == -1) {
                        this.lifeNoteList.push(bodyInfo);
                    } else {
                        this.lifeNoteList[index] = bodyInfo;
                    }
                    // 刷新消息
                    this.refreshAbstract(this.lifeNoteList, true);
                }
            } catch (error) {
                console.log("onMqttMsgOnArrived:catch", error);
            }
        },
    },
    watch: {
        // tab切换刷新日程数据
        bannerFocusIndex(newValue, oldValue) {
            this.$parent.bannerFocusIndex = newValue;
            if (newValue !== oldValue && newValue === 0) {
                this.getScheduleListRequest();
            }
        },
    },
};
</script>
<style lang="less" scoped>
.container-home {
    width: 1920px;
    height: 1080px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    background-size: 100% 100%;
    .page-back-tips {
        width: 338px;
        height: 46px;
        position: absolute;
        bottom: 12px;
        left: 791;
        z-index: 2000;
    }
    .webview-wrap {
        position: absolute;
        left: 0;
        top: 0px;
        width: 1920px;
        height: 1080px;
        z-index: 2000;
        background-color: rgba(53, 53, 53, 0.6);
        .iframe {
            width: 1920px;
            height: 1080px;
        }
        // background-color: red;
    }
    .allseen-box {
        width: 1920px;
        height: 1080px;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 3000;
        background-size: 100% 100%;
        .allseen-img {
            width: 1920px;
            height: 1080px;
        }
    }
    .helper-qrcode {
        background-color: transparent;
        position: absolute;
        z-index: 4000;
        width: 290px;
        height: 290px;
        left: 288px;
        top: 604px;
    }
    .xiaojia-img {
        position: absolute;
        left: 50px;
        top: 38px;
        width: 371px;
        height: 165px;
        z-index: 3;
    }

    .left-box-top-shadow {
        position: absolute;
        left: 75px;
        top: 60px;
        width: 345px;
        height: 115px;
        z-index: 2;
        background-image: url(assets/raw/image/left-top-shadow-bg.webp);
        background-size: 100% 100%;
    }

    .left-box-bottom-shadow {
        position: absolute;
        left: 75px;
        bottom: 60px;
        width: 345px;
        height: 60px;
        z-index: 2;
        background-image: url(assets/raw/image/left-bottom-shadow-bg.webp);
        background-size: 100% 100%;
    }

    .right-box-top-shadow {
        position: absolute;
        right: 75px;
        top: 60px;
        width: 345px;
        height: 30px;
        z-index: 2;
        background-image: url(assets/raw/image/right-top-shadow-bg.webp);
        background-size: 100% 100%;
    }

    .right-box-bottom-shadow {
        position: absolute;
        right: 75px;
        bottom: 60px;
        width: 345px;
        height: 60px;
        z-index: 2;
        background-image: url(assets/raw/image/right-bottom-shadow-bg.webp);
        background-size: 100% 100%;
    }

    .left-box {
        position: absolute;
        top: 124px;
        left: 75px;
        width: 345px;
        height: 896px;
        justify-content: flex-start;
        z-index: 1;
        .left-item {
            width: 345px;
            padding-top: 30px;
            background-color: transparent;
            align-items: center;
            .left-nav {
                position: relative;
                width: 285px;
                border-width: 1px;
                border-style: solid;
                border-color: rgba(255, 255, 255, 0.4);
                background-image: url(assets/raw/image/left-tip-bg.webp);
                background-size: 100% 100%;
                border-radius: 12px;
                focus-border-color: #ffffff;
                focus-border-width: 6px;
                focus-border-radius: 12px;
                padding: 18px;
                flex-direction: row;
                flex-wrap: wrap;
                .title-box {
                    background-color: transparent;
                    .leftTitle {
                        // position: absolute;
                        // top: 25px;
                        // left: 56px;
                        height: 36px;
                        line-height: 36px;
                        padding-left: 8px;
                        padding-right: 8px;
                        font-size: 20px;
                        font-weight: 500;
                        color: #ffffff;
                        background-color: transparent;
                    }
                }
                .alarm-time {
                    position: absolute;
                    top: 134px;
                    left: 24px;
                    width: 270px;
                    height: 22px;
                    font-size: 18px;
                    color: #ffffff;
                }
                .leftDesc {
                    // position: absolute;
                    // top: 66px;
                    // left: 20px;
                    margin-top: 9px;
                    opacity: 0.8;
                    width: 249px;
                    font-size: 24px;
                    line-height: 32px;
                    color: #ffffff;
                    .leftItemDesc {
                        width: 249px;
                        font-size: 24px;
                        color: #ffffff;
                    }
                }
            }
        }
    }
    .right-box {
        position: absolute;
        top: 60px;
        right: 75px;
        width: 345px;
        height: 960px;
        .right-item {
            width: 345px;
            background-color: transparent;
            padding-top: 30px;
            align-items: center;
            .right-nav {
                position: relative;
                background-color: transparent;
                border-radius: 12px;
                focus-border-color: #fff;
                focus-border-width: 6px;
                focus-border-radius: 12px;
                // flex-direction: row;
                // flex-wrap: wrap;
                .right-image {
                    width: 285px;
                    placeholder: 1;
                }
            }
        }
    }

    .lottieview-nav {
        .lottieview-qipao-box {
            position: absolute;
            top: 0px;
            right: 530px;
            width: 290px;
            height: 163px;
            z-index: 999;
        }
        .lottieview-box {
            position: absolute;
            top: 0px;
            right: 230px;
            width: 150px;
            height: 150px;
            z-index: 999;
            // background-color: #f50000;
        }
        .lottieview-noteRefresh-box {
            position: absolute;
            top: 0px;
            left: 130px;
            width: 150px;
            height: 150px;
            z-index: 999;
        }
    }

    .container_title {
        width: 200px;
        height: 100px;
        color: #000000;
        font-size: 59px;
        // background-color: rgb(19, 89, 219);
    }
    .content-box {
        position: absolute;
        top: 60px;
        left: 450px;
        width: 1020px;
        height: 960px;
        background-color: transparent;
        .center-top-shadow {
            position: absolute;
            left: 0;
            top: 0;
            width: 1020px;
            height: 127px;
            z-index: 200;
            background-image: url(assets/raw/image/center-top-shadow-bg.webp);
            background-size: 100% 100%;
            background-color: transparent;
        }
    }
    .my-score-title {
        position: absolute;
        width: 96px;
        height: 29px;
        top: 15px;
        left: 15px;
        font-size: 24px;
        color: #ffffff;
    }
    .my-score-tips {
        position: absolute;
        width: 96px;
        height: 29px;
        top: 67px;
        left: 15px;
        font-size: 18px;
        font-weight: 600;
        color: #ffffff;
    }
    .my-score {
        position: absolute;
        width: 140px;
        height: 50px;
        font-size: 42px;
        color: #ffffff;
        font-weight: bold;
        left: 15;
        top: 89px;
    }
    .right-vod-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 289px;
        padding-left: 15px;
        padding-right: 15px;
        .right-vod-title {
            width: 259px;
            height: 28px;
            margin-top: 15px;
            font-size: 18px;
            font-weight: 500;
            opacity: 0.8;
            color: #ffffff;
        }
        .right-vod-name {
            width: 259px;
            height: 30px;
            font-size: 24px;
            font-weight: 600;
            color: #ffffff;
        }
    }
    .stock-info-box {
        position: absolute;
        top: 0;
        left: 0;
        width: 289px;
        padding-left: 15px;
        padding-right: 15px;
        .stock-info-top {
            margin-top: 10px;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .info-left {
                .stock-text {
                    font-size: 20px;
                    font-weight: 500;
                    color: #ffffff;
                }
            }
            .info-right {
                .info-right-num {
                    font-size: 18px;
                    font-weight: 500;
                    color: #ffffff;
                    text-align: right;
                }
                .info-right-icon {
                    width: 115px;
                    height: 17px;
                }
            }
        }
        .stock-info-bottom {
            margin-top: 20px;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            .info-left {
                .stock-text {
                    font-size: 20px;
                    font-weight: 500;
                    color: #ffffff;
                }
            }
            .info-right {
                .info-right-num {
                    font-size: 18px;
                    font-weight: 500;
                    color: #ffffff;
                    text-align: right;
                }
                .info-right-icon {
                    width: 115px;
                    height: 17px;
                }
            }
        }
    }
    .map-address-box {
        position: absolute;
        bottom: 15px;
        left: 0;
        width: 289px;
        padding-left: 15px;
        padding-right: 15px;
        z-index: 99;
        top: 0;
        justify-content: flex-end;
        .map-shadow-bg {
            width: 285px;
            background-image: url(assets/raw/image/map-widget-shadow-bg.png);
            background-size: 100% 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: -1;
        }
        .map-address-time {
            width: 289px;
            background-color: transparent;
            flex-direction: row;
            align-items: flex-end;
            p {
                justify-self: self-end;
                display: inline-block;
                font-size: 18px;
                color: #000000;
            }
            .need-time {
                position: relative;
                top: 10px;
                font-size: 48px;
                color: #000000;
                font-weight: 600;
            }
        }
        .no-location-tip {
            width: 259px;
            background-color: transparent;
            position: absolute;
            bottom: 0;
            left: 15px;
            .no-location-tip-title {
                font-size: 18px;
                font-weight: bold;
                margin-bottom: 8px;
                color: #000000;
            }
            .no-location-tip-detail {
                font-size: 18px;
                color: #000000;
                opacity: 0.6;
            }
        }
        .map-address-text {
            margin-top: 8px;
            width: 259px;
            height: 26px;
            font-size: 20px;
            color: #000000;
        }
        .map-address-desc {
            margin-top: 5px;
            width: 289px;
            height: 26px;
            font-size: 20px;
            opacity: 0.6;
            color: #000000;
        }
    }
}
</style>
